<template>
	<view class="order-detail-container">
		<view style="padding-top: 20upx;margin-left: 20upx;">
			退款前,提前联系商家,审核会超快哦
		</view>
		<view class="order-status" v-if="orderDetail.order_status == 0">
			<image class="image" src="../../static/images/mall/clock@2x.png" mode=""></image>
			<text class="tips-status">待付款</text>
			<text class="tips-title">请在30分钟内支付，超时订单自动取消哦～</text>
		</view>
		<view class="item-list"><OrderItem :itemList="orderDetail.carts_info"></OrderItem></view>
		<view class="order-total-price">
			<view class="total-price">
				<text>订单总额</text>
				<text>￥{{orderDetail.total_price}}</text>
			</view>
			<view class="discount">
				<view class="left">
					<text >用{{orderDetail.use_roses_num}}支玫瑰抵扣了{{orderDetail.deduction}}元</text>
				</view>
				<view class="right">- ¥ {{orderDetail.deduction}}</view>
			</view>
			<!-- <view class="discount">
				<view class="left">
					<image class="select-icon" src="../../static/images/mall/selected@2x.png" mode=""></image>
					<image class="flower-icon" src="../../static/images/mall/flower@2x.png" mode=""></image>
					<text>可用333支玫瑰抵扣200元</text>
				</view>
				<view class="right">- ¥ 200.00</view>
			</view> -->
			<view class="ultimate-price">
				<view class="count">共{{orderDetail.carts_info.length}}件</view>
				<view class="reality-price">
					<text class="label">实付：</text>
					<text class="price">￥{{orderDetail.pay_price}}</text>
				</view>
			</view>
			
			<view class="tuikuan">
				<view class="left">
					退款金额
				</view>
				<view class="right">
					<!-- <input type="text" v-model="orderDetail.pay_price"> -->
					<view>￥{{orderDetail.pay_price}} + {{orderDetail.use_roses_num}}玫瑰</view>
				</view>
			</view>
			
		</view>
		<view class="link-customer">
			<button type="primary" class="text" style="background-color: #FFFFFF;color: #000000;font-size: 22upx;margin-left: -26upx;width: 100%;" open-type="contact">
			<image src="../../static/images/mall/kefu@2x.png" mode=""></image>
			联系客服
			</button>
		</view>
		<view class="beizhu">
			<text>备注:</text>
			<textarea  placeholder="请输入" v-model="note"/>
		</view>
		
		<view class="footer">			
			<text class="btn pay-btn" @click="submitPay(orderDetail.order_id)">提交</text>
		</view>
	</view>
</template>

<script>
import OrderItem from '@/pageA/order-item/order-item.vue';
export default {
	components: {
		OrderItem
	},
	data() {
		return {
			note : '',
			orderDetail: {},
			tuikuanMoney : 0
		};
	},
	methods: {
		sureShop(str){
			this.$request
				.post({
					url: 'order/confirm',
					data: {
						order_id: str
					}
				})
				.then(r => {
					console.log(r);
				})
				.catch(err => {
					console.log(err);
				});
		},
		initData() {
			this.getOrderDetail();
		},
		getOrderDetail() {
			this.$request
				.get({
					url: 'order/detail',
					data: {
						order_id: this.order_id
					}
				})
				.then(r => {
					console.log(r);
					this.orderDetail = r.data;
					this.tuikuanMoney = this.orderDetail.pay_price
				})
				.catch(err => {
					console.log(err);
				});
		},
		copy(content) {
			uni.setClipboardData({
				data: content,
				success: function() {
					uni.showToast({
						icon: 'none',
						title: '复制成功'
					});
				}
			});
		},
		submitPay(order_id) {
			if(this.note == ''){
				uni.showToast({
					icon: 'none',
					title: '请输入备注'
				});
				return
			}
			if(this.tuikuanMoney > this.orderDetail.total_price){
				uni.showToast({
					icon: 'none',
					title: '退款金额不能大于订单金额'
				});
				return
			}
				this.$request
					.post({
						url: 'refund/apply',
						data: {
							refund_fee : this.tuikuanMoney,
							order_id : this.order_id,
							note : this.note
						}
					})
					.then(r => {
						uni.showToast({
							icon: 'none',
							title: '退货申请已提交'
						});
						uni.navigateBack({
							
						})
						console.log(r)
					});
			
		}
	},
	onLoad(options) {
		this.order_id = options.id;
	},
	onShow() {
		this.initData();
	}
};
</script>

<style scoped lang="less">
@import '@/static/css/theme.less';
@import '@/static/css/util.less';
.tuikuan{
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
	.right{
		display: flex;
	}
	text{
		border: 1px solid #cccccc;
		width: 50rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
	}
	input{
		width: 100rpx;
		text-align: center;
		margin-top: 3rpx;
		border: 1px solid #cccccc;
	}
}
	button::after{
		border: 0;
	}
	.beizhu{
		margin-top: 20upx;
		margin-left: 30upx;
		display: flex;
		flex-direction: column;
		textarea{
			margin-top: 10upx;
		}
	}
.order-detail-container {
	background-color: @fff;
	.order-status {
		width: 100%;
		line-height: 84upx;
		background: @defaultBg;
		display: flex;
		align-items: center;
		padding: 0 32upx;
		color: @fff;

		.image {
			width: 40upx;
			height: 40upx;
		}

		.tips-status {
			font-size: 30upx;
			margin: 0 20upx 0 16upx;
		}

		.tips-title {
			font-size: 26upx;
		}
	}

	.item-list {
		padding: 40upx 32upx;
		border-bottom: 2upx solid #dfe1ec;
	}

	.order-total-price {
		padding: 22upx 32upx;

		.total-price {
			display: flex;
			justify-content: space-between;
			color: #474a58;
			font-size: 26upx;
			line-height: 36upx;
		}

		.discount {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26upx;
			color: #474a58;
			margin-top: 22upx;
			margin-bottom: 28upx;

			.left {
				display: flex;
				align-items: center;

				.select-icon {
					width: 40upx;
					height: 40upx;
				}

				.flower-icon {
					width: 30upx;
					height: 36upx;
					margin: 0 10upx 0 22upx;
				}
			}

			.right {
			}
		}

		.ultimate-price {
			font-size: 26upx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.count {
				color: #474a58;
			}

			.reality-price {
				.label {
					font-weight: 500;
					font-size: 30upx;
					line-height: 42upx;
				}

				.price {
					color: @defaultC;
				}
			}
		}
	}

	.link-customer {
		width: 100%;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 2upx solid #dfe1ec;
		border-bottom: 2upx solid #dfe1ec;

		image {
			width: 36upx;
			height: 40upx;
			margin-right: 10upx;
		}

		font-size: 26upx;
		color: #8389a0;
	}

	.order-info {
		margin-bottom: 98upx;
		padding: 30upx 32upx 50upx 32upx;

		.header {
			color: #474a58;
			font-size: 30upx;
			font-weight: 500;
			line-height: 42upx;
		}

		.order-num,
		.create-time,
		.pay-way,
		.pay-time,
		.remark {
			line-height: 36upx;
			margin-top: 20upx;
		}

		.label {
			font-size: 26upx;
			color: #8389a0;
		}

		.value {
			font-size: 26upx;
			color: #474a58;
		}

		.copy-btn {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: #474a58;
			width: 100upx;
			height: 52upx;
			border-radius: 4upx;
			border: 2upx solid rgba(223, 225, 236, 1);
			margin-left: 20upx;
		}
	}

	.footer {
		background-color: @fff;
		border-top: 1upx solid #e9ebf0;
		width: 100%;
		height: 98upx;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 10upx 32upx;

		.btn {
			width: 178upx;
			height: 80upx;
			border-radius: 4upx;
			font-size: 34upx;
			color: #474a58;
			border: 2upx solid rgba(223, 225, 236, 1);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20upx;
		}

		.pay-btn {
			background: @defaultBg;
			color: #fff;
			border: none;
		}
	}
}
</style>
